<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评价管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }
        .content-header{
            margin-left: 10px;
            margin-bottom: 10px;
        }
        .demo-form-inline{
            margin-left: 40px;
        }
        .box{
            margin:auto;
            text-align: center;

        }
        .table{
            margin:auto;
            /*//background: #9f191f;*/
        }
        .addRow{
            margin-top: 10px;
            text-align: center;


        }
        .save{
            text-align: right;
            margin-bottom: 5px;
            margin-right: 10%;
        }


    </style>
</head>
<body>
<div id="app">

    <div class="content-header">
        <h1>评价<small>添加虚拟评论</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>评价</el-breadcrumb-item>
            <el-breadcrumb-item>添加虚拟评论</el-breadcrumb-item>
        </el-breadcrumb>
    </div>


<!--    <el-form :inline="true" class="demo-form-inline">-->
<!--        <el-form-item label="输入商品id">-->
<!--            <el-input placeholder="商品id" v-model="searchMap.spuId"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品分类">-->
<!--            <el-input placeholder="请输入商品分类" v-model="searchMap.type"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户昵称">-->
<!--            <el-input placeholder="输入用户昵称" v-model="searchMap.userName"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--            <el-button type="primary" @click="handleCurrentChange">查询</el-button>-->
<!--        </el-form-item>-->
<!--    </el-form>-->

    <div style="margin-bottom: 5px;margin-left: 5px">
<!--        <el-button @click="restoreMany()" size="mini" type="danger" size="small">批量还原</el-button>-->
        <el-button @click="goBack()" size="mini" type="primary" size="small">返回</el-button>
    </div>
    <div class="box">
        <div class="save">
            <el-button @click="save()" size="mini" type="primary" size="small">确认添加</el-button>
        </div>

        <div class="table" align="center" valign="middle">
            <el-table :data="tableData"
                      :cell-style="{ 'text-align': 'center' ,'height':'60px'}"
                      :header-cell-style="{ 'text-align': 'center','height':'40px'}"
                      border style="width: 90%" >
<!--                <el-table-column label="商品编号" width="300">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-input placeholder="商品id" v-model="scope.row.skuId"></el-input>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="商品名称" width="600">
                    <template slot-scope="scope">
                        <el-autocomplete
                                style="width:500px"
                                class="inline-input"
                                v-model="scope.row.skuName"
                                :fetch-suggestions="querySearch"
                                :trigger-on-focus="false"
                                placeholder="请输入内容"
                                @select="handleSelect"
                        ></el-autocomplete>
                    </template>
                </el-table-column>
                <el-table-column label="评价" width="300">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.replyContent"  placeholder="请选择" filterable allow-create>
                            <el-option v-for="item in replyContentList " :key="item.id" :label="item.content" :value="item.content">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" >
                    <template slot-scope="scope">
                        <el-button @click="deleRow(scope.$index)" size="mini" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="addRow">
            <el-button @click="addRow()" size="mini" type="primary" size="small">新增一行</el-button>
        </div>
    </div>






</div>

</body>
</html>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [{}],
                currentPage: 1,
                size: 10,
                total:10,
                searchMap: {},
                centerDialogVisible: false,
                pojo: {},
                imageUrl: '',
                multipleSelection:[],
                ids:[],
                replyContentList:[
                    {
                        id:0,
                        content:"东西质量非常好，与卖家描述的完全一致"
                    },
                    {
                        id:1,
                        content:"终于收到我需要的宝贝了，东西很好，价美物廉，谢谢掌柜的！"
                    },
                    {
                        id:2,
                            content:"非常满意,真的很喜欢，完全超出期望值"
                    },
                    {
                        id:3,
                            content:"发货速度非常快，包装非常仔细、严实，物流公司服务态度很好"
                    },
                    {
                        id:4,
                        content:"包装很完整，没有破损。迫不及待的拆开，发现完全超乎我的想象"
                    },
                    {
                        id:5,
                        content:"发货速度非常快，包装非常仔细、严实，物流公司服务态度很好"
                    }

        ],
                skuNames:[],
            }
        },
        created() {


        },
        methods: {
            goBack(){
                location.href = "commentList.html";
            },
            deleRow(index){
                this.tableData.splice(index,1)
            },
            addRow(){
                this.tableData.push({})
                console.log("table")
                console.log(this.tableData)
                console.log("table")

            },
            save(){
                console.log("this.tableData")
                console.log(this.tableData)
                console.log("this.tableData")
                this.$confirm('要添加吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(`/productReply/addVirtual.do`, {"productReplies": this.tableData}).then(response => {
                        console.log("response")
                        console.log(response)
                        console.log("response")
                        if (response.data.code == 0) {
                            this.tableData=[{}];
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '添加失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                });
            },
            querySearch(queryString, cb) {
                // var restaurants = this.restaurants;
                // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                //cb(results);
                axios.post(`/sku/findList.do`, {"name": queryString}).then(response => {
                    console.log("商品")
                    console.log(response)
                    console.log("商品")
                    for(var i=0;i<response.data.length;i++){
                        response.data[i].value=response.data[i].name;
                    }
                    cb(response.data);
                })
            },

            handleSelect(item) {
                console.log(item);
            },



        }
    })
</script>